<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	 <title>设备查看</title>
    
    <%@ include file="head.jsp" %>
</head>

<body>


<div class="layui-row" style="width: auto;height:566px;">
    <div class="layui-col-md9" style="border-right:1px #d3d3d3 solid;height:568px ;overflow:auto">
       <canvas id="mycanvas" width="872px" height="566px" ></canvas>
    
    
    </div>
    <div class="layui-col-md3">
    	<div class="layui-row grid-demo">
            <div class="layui-col-md12" style="height: 250px;">
                <sqan style="width: 100%;height: 40px;display: inline-block;
                            text-align: center;font-size: 15px;line-height: 40px;">
                   		 设备状态
                </sqan>
                <div id="alarm" class="layui-col-md12" style="border : 1px solid green; height: 150px">

                    <div id= "eq_condition" style="height: 70px;width:200px; background-color: green; margin: 0 auto;
                        position: relative; top: 50%; transform: translateY(-50%);">

                    </div>
					<div id="alarm1">
					</div>

                </div>
                <div class="layui-col-md12" id="messg" style=" height: 60px">

                    <span style="width: 100%;height: 60px;display: inline-block;
                    text-align: center;font-size: 15px;line-height: 60px;">
                        	正常
                    </span>

                </div>
            </div>
            <div class="layui-col-md12" id= "message" style="height: 250px; padding:10px;">
                <!-- <div class="layui-col-md12" style="height: 50px">
                    <button id="woring" class="layui-btn f_btn1">异常</button>
                </div> -->
            </div>
        </div>
    </div>
</div>
<script>
    //JavaScript代码区域
    layui.use(['element','layer','form','table'],function(){
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;
        var table = layui.table;
		
        var eq_date;	//设备基础信息
        var biao ;
        var canvas1 = $("#mycanvas")[0];
        var ctx=canvas1.getContext("2d");
        
        
        var paint1 = function(json){
			
			//alert(eq_date[0].eq_width);
			biao = 1 ;			//放大系数
			ctx.font="13px Arial";
			for(var i = 0 ; i < json.length ; i ++ ){	//确定放大系数
				if(json[i].eq_note == '0'){
					var eq_width = parseFloat(json[i].eq_width) ;
					var eq_length = parseFloat(json[i].eq_length) ;
					if(eq_width / eq_length > 1.53) {
						if(eq_width * biao > 800){
							while(eq_width * biao > 800){
								biao = biao - 0.05 ;
							}
						}else{
							while(eq_widht * biao < 800){
								biao = biao + 0.05 ;
							}
						}
					}else{
						if(eq_length * biao > 500){
							while(eq_length * biao > 800){
								biao = biao - 0.04 ;
							}
						}else{
							while(eq_length * biao < 800){
								biao = biao + 0.04 ;
							}
						}
					}
					break;		//跳出循环
				}
			}
			
			for(var i = 0 ; i < json.length ; i ++){
			    var eq_length = parseFloat(json[i].eq_length) * biao ;
			    var map_x = parseFloat(json[i].map_x) * biao ;
			    var map_y = parseFloat(json[i].map_y) * biao + 10 ;
			    var eq_width = parseFloat(json[i].eq_width)* biao ;
				if(eq_length > 0){	//说明是矩形
					ctx.strokeRect(map_x,map_y,eq_width,eq_length) ; //将矩形画出来
					ctx.fillText(json[i].eq_name,map_x + 5,map_y + 20);
					
				}else{					//画圆形
			        ctx.beginPath();
			        ctx.arc(map_x,map_y,eq_width,0,2*Math.PI);
			        ctx.stroke();
			        ctx.closePath();
				}
			}
	        
        }
		
        var load1 = function(){
        	
			$.ajax({
				type : 'post',
				url  : 'showEq' ,
				success: function(data){
					eq_date = JSON.parse(data);
					
					paint1(eq_date);
					
				}
			});
        }
        var baojing1= function () {

            $('#eq_condition').css("background-color","red");
            var bon1 = $("<button class='layui-btn' id='bon11'>停止报警</button>");
            $("#messg").html(bon1);

            var autio = $('<div class="video" style="display: none">' +
                '                 <audio controls autoplay="autoplay" loop="loop" preload="auto">' +
                '                       <source src="resources/lib/mp3/嘀嘀报警.mp3" type="audio/mpeg">' +
                '                         您的浏览器不支持 audio 元素。' +
                '                 </audio>' +
                '          </div>') ;

            $("#alarm1").html(autio) ;
        }
		var baojing2= function () {
            $('#eq_condition').css("background-color","red");
            var bon1 = $("<button class='layui-btn' id='bon11'>停止报警</button>");
            $("#messg").html(bon1);

            var autio = $('<div class="video" style="display: none">' +
                '                 <audio controls autoplay="autoplay" loop="loop" preload="auto">' +
                '                       <source src="resources/lib/mp3/警报铃声.mp3" type="audio/mpeg">' +
                '                         您的浏览器不支持 audio 元素。' +
                '                 </audio>' +
                '          </div>') ;

            $("#alarm1").html(autio) ;
        }
        
		var xiu = function(a,b){
			$("#message").html("") ;
	    	var div0 = $('<div>报警设备id：'+a.eq_id+'</div>');
	    	var div1 = $('<div>报警设备名称：'+a.eq_name+'</div>');
	    	var div2 = $('<div>报警设备当前温度 ：'+b.eq_temp+'</div>');
	    	var div3 = $('<div>报警设备预警温度值 ：'+a.eq_temp_low+'</div>');
	    	var div4 = $('<div>报警设备报警温度值 ：'+a.eq_temp_height+'</div>');
	    	$("#message").append(div0) ;
	    	$("#message").append(div1) ;
	    	$("#message").append(div2) ;
	    	$("#message").append(div3) ;
	    	$("#message").append(div4) ;
		}
        var paint2 = function(){
        	$.ajax({
        		url:'selectTemp'
        		,type:'post'
        		,success:function(data){
        			var sd = JSON.parse(data) ;
        			//alert(sd.length) ;
        			for(var i = 0 ; i < eq_date.length ; i ++){
        				for(var j = 0 ; j < sd.length ; j ++){
        					if(sd[j].eq_id == eq_date[i].eq_id){
        						var map_x = parseFloat(eq_date[i].map_x) * biao ;
        					    var map_y = parseFloat(eq_date[i].map_y) * biao + 10 ;
        					    var eq_width = parseFloat(eq_date[i].eq_width)* biao ;
        					    var eq_length = parseFloat(eq_date[i].eq_length) * biao ;
        					    
        					    ctx.strokeStyle="black";
        					    if(sd[j].eq_temp > eq_date[i].eq_temp_low){
        					    	ctx.strokeStyle="red";
        					    	ctx.fillText(sd[j].eq_temp + "℃",map_x + 10,map_y - 10);
        					   		ctx.strokeStyle="black";
        					    	baojing1();
        					    	xiu(eq_date[i],sd[j]) ;
        					    	
        					    }else if(sd[j].eq_temp > eq_date[i].eq_temp_height){
        					    	ctx.strokeStyle="red";
        					    	ctx.fillText(sd[j].eq_temp + "℃",map_x + 10,map_y - 10);
        					   		ctx.strokeStyle="black";
        					    	baojing2();
        					    	xiu(eq_date[i],sd[j]) ;
        					    }
        					    else{
        					    	ctx.fillText(sd[j].eq_temp + "℃",map_x + 10,map_y - 10);
        					    }
        					    break ;
        					}
        				}
        			}
        			
        		}
        		
        	})
        }
		load1();		//刷新载入图画
		//alert("sd ");
		/* 数据实时显示函数 */
		var show1 =function(){
			ctx.clearRect(0,0,canvas1.width,canvas1.height);
	        paint1(eq_date);
	        paint2();
	        
	        //alert(biao) ;
		}
		var inter = function(){
			
			var interval = self.setInterval(show1, 3000);
		}
		inter();
		
        $("#messg").on("click","#bon11",function () {

            $('#eq_condition').css("background-color","green");
            $(".video").remove();
            layer.msg("报警已经停止");
            var zc = $('<span style="width: 100%;height: 60px;display: inline-block;text-align: center;font-size: 15px;line-height: 60px;">正常</span>');
            $("#messg").html(zc);
        })
        
    });
</script>
</body>
</html>